<template>
  <div class="ranking">
    <!-- 排行榜 -->
    <div class="phb">
      <h1>官方榜</h1>
      <div class="phb-list" v-for="(items,index) in rankList" :key="index">
        <div class="list-img" @click="itemClick(items)">
          <img v-lazy="items.coverImgUrl" alt="">
          <i class="iconfont icon-bofang"></i>
        </div>
        <div class="list-top">
          <ul>
            <li v-for="(item,indey) in topList[index]" :key="indey" @click="playMusic(item)">
              <span :class="{top: indey+1<=3}">{{indey+1}}.</span>
              <span v-show="item.al">{{item.al.name}}</span>
              <span v-for="(i,indez) in item.ar" :key="indez" class="author">{{i.name}}</span>
            </li>
          </ul>
          <div class="load-more">
            <span @click="itemClick(items)">查看全部<i class="iconfont icon-youjiantou"></i></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 歌手榜 -->
    <div class="phb">
      <h1>歌手榜</h1>
      <div class="phb-list">
        <div class="list-img" @click="$router.push('/home/singerLeaderBoard')" v-if="singerList.length!==0">
          <div class="mask"></div>
          <span>歌手榜</span>
          <img v-lazy="singerList[0].picUrl" alt="">
        </div>
        <div class="list-top">
          <ul>
            <li v-for="(item,index) in singerList" :key="index" @click="$router.push('/home/singerLeaderBoard')">
              <span :class="{top: index+1<=3}">{{index+1}}.</span>
              <span @click="$router.push('/home/singerLeaderBoard')">{{item.name}}</span>
            </li>
          </ul>
          <div class="load-more">
            <span @click="$router.push('/home/singerLeaderBoard')">查看全部<i class="iconfont icon-youjiantou"></i></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 全球榜 -->
    <div class="phb">
      <h1>全球榜</h1>
      <div class="phb-list">
        <ul class="global-list">
          <li v-for="(item,index) in globalTop" :key="index" class="global" @mouseleave="mouseMove = false" @mouseover="mouseMove=index" @click="itemClick(item)">
            <img v-lazy="item.coverImgUrl" alt="">
            <div class="play-count" :class="{top: mouseMove===index}"><i class="iconfont icon-bofang"></i>{{item.playCount | initVolume}}</div>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import { getRankTop, singerTop } from '@/api/rank'
import { getSongDetailList } from '@/api/songrc'

export default {
  name: 'MyRanking',
  created() {
    this.getRankTopData()
  },
  data() {
    return {
      // 排行榜数据
      rankList: [],
      // 全球榜
      globalTop: [],
      // 前几排行榜
      topList: [],
      singerList: [],
      mouseMove: false
    }
  },
  methods: {
    // 请求数据
    async getRankTopData() {
      const { data: res } = await getRankTop()
      this.rankList = res.list.splice(0, 4)
      this.globalTop = res.list.splice(4, res.list.length)
      this.rankList.map(async item => {
        const { data: { playlist: res } } = await getSongDetailList(item.id)
        this.topList.push(res.tracks.splice(0, 5))
      })
      const { data: singer } = await singerTop()
      this.singerList = singer.list.artists.splice(0, 5)

    },
    itemClick(val) {
      window.sessionStorage.setItem('id', val.id)
      this.$router.push(`/home/detail/${val.id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.ranking {
  .phb {
    h1 {
      font-size: 25px;
      margin: 15px 0;
    }
    .phb-list {
      position: relative;
      .list-img {
        position: relative;
        width: 200px;
        height: 200px;
        // overflow: hidden;
        &:hover i {
          display: block;
        }
        img {
          width: 100%;
          height: 100%;
        }
        i {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-weight: 900;
          font-size: 70px;
          color: red;
        }
        .mask {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          background: rgba(128, 0, 128, 0.5);
        }
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 10;
          font-size: 25px;
          color: #fff;
        }
      }
      .global-list {
        display: flex;
        flex-wrap: wrap;
        .global {
          position: relative;
          width: 200px;
          margin: 10px 20px;
          overflow: hidden;
          img {
            width: 100%;
          }
          .play-count {
            position: absolute;
            top: -20%;
            left: 0;
            right: 0;
            padding: 5px;
            text-align: right;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5));

            &.top {
              animation: songs_top_bottom 0.5s linear forwards;
            }
            i {
              margin-right: 5px;
            }
          }
        }
      }
      .list-top {
        ul {
          li {
            overflow: hidden;
            span {
              display: inline-block;
              &:first-child {
                margin: 8px;
              }
              &.top {
                color: red;
              }
            }
            .author {
              float: right;
              margin: 0 5px;
              color: #666;
              font-size: 14px;
            }
          }
        }
        .load-more {
          text-align: center;
          span {
            padding: 5px 0;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>